<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,body {
						height: 100%;
						margin: 0px;
						font-family:PingFang-SC-Medium;
						padding: 0px;
					}
			
			.mui-content{
				position: relative;
				float: left;
				width: 100%;
				padding-bottom: 40px;
				background: #FFFFFF;
			
		          }
             a{
             color: #FFFFFF;	
             }
             a:active{
             	color: #FFFFFF;
             }
			 .mui-bar{
				 background: #FE635F;
				 
			 }
			 .mui-title{
				 
				 color: #FFFFFF;
			 }
			 .head{
				 position: relative;
				 float: left;
				 width: 100%;
                 margin-top:20px;
				 	padding: 0  15px;
				 box-sizing: border-box;
			 }
			 
			 .dan{
				 width: 107px;
				 height: 68px;
				 position: relative;
				 float: left;
				 margin-left: calc((100% - 321px)/3);
				 margin-top: 10px;
				 padding: 10px  10px;
				 box-sizing: border-box;
				 background:rgba(255,255,255,1);
border:1px solid rgba(255,201,200,1);
border-radius:4px;
			 }
			.dan>div:nth-child(1){
				 text-align: center;
				 position: relative;
				 float: left;
				 font-size:13px;
				 width: 100%;
                 font-weight:bold;
                 color:rgba(253,101,97,1);
				 line-height: 28px;
			} 
			 	.dan>div:nth-child(2){
			 	 text-align: center;
			 	 position: relative;
			 	 float: left;
			 	 font-size:12px;
			 	 width: 100%;
			      font-weight:bold;
			    color:rgba(102,102,102,1);
			 	 line-height: 20px;
			 } 
		.hang{
			position: relative;
			float: left;
			width: 100%;
			height: 10px;
			background:rgba(248,248,248,1);
			margin-top: 20px;
		}
		
		
		.chongzhis{
			position: relative;
			float: left;
			width: 100%;
			height: 58px;
			padding: 0  25px;
          box-sizing: border-box;
		}
		
		.chongzhis>img{
			position: relative;
			float: left;
			width: 22px;
			height: 22px;
			margin-top: 18px;
		}
		
		.chongzhis>div{
			position: relative;
			float: left;
			padding: 0 5px;
			box-sizing: border-box;
			height: 100%;
			text-align: left;
			line-height: 58px;
			font-size:15px;
            font-weight:500;
            color:rgba(51,51,51,1);
            margin-left: 10px; 
		}	 
		.lastas{
			position: relative;
			float: left;
			width: 100%;
			padding: 0  15px;
			box-sizing: border-box;
		}
			.lastas>div{
				height: 44px;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
border-radius:20px;
			font-size:16px;
			text-align: center;
font-family:PingFang-SC-Bold;
font-weight:bold;
color:rgba(255,255,255,1);	
line-height: 44px;
margin-top: 100px;
			}
			
	.titless{
		width: 100%;
		padding: 0  15px;
		margin-top: 20px;
	}		
		.titless>span:nth-child(1){
			position: relative;
			float: left;
		    font-size:15px;
		    font-weight:500;
		    color:rgba(51,51,51,1);	
		}	
			
		.titless>span:nth-child(2){
				position: relative;
				float: left;
			font-size:15px;
			font-weight:500;
	color:rgba(254,102,98,1);	
					}	
				.active{
					background: #FE6662;
					color: #FFFFFF;
				}
			.apps,.appsd{
				position: relative;
				float: left;
				width: 100%;
				margin-top: 30px;
			}		
			
					
	</style>
	</head>
	<body>

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">金币充值</h1>
		</header>
		<div class="mui-content" id="content" style="display: ;">

			<div class="titless"><span>我的剩余金币:</span><span id="shenyu">8</span></div>

			<div class="head">
				<!-- <div class="dan">
					<div>￥10</div>
					<div>2枚金币</div>
				</div>
				<div class="dan">
					<div>￥40</div>
					<div>40枚金币</div>
				</div>

				<div class="dan">
					<div>￥100</div>
					<div>100枚金币</div>
				</div>
				<div class="dan">
					<div>￥200</div>
					<div>220枚金币</div>
				</div>
				<div class="dan">
					<div>￥300</div>
					<div>400枚金币</div>
				</div>

				<div class="dan">
					<div>￥500</div>
					<div>800枚金币</div>
				</div> -->
			</div>


			<div class="hang"></div>
          <div class="apps">
               <div class="chongzhis  vxx" data-id="913" >
			  	<img src="../image/weixin.png" />
			  	<div>微信扫码充值</div>
			  </div>
			  <div class="chongzhis vxx" data-id="903">
			  	<img src="../image/zhifubao.png" />
			  	<div>支付宝扫码充值</div>
			  </div>
			  <div class="chongzhis vxx" data-id="904">
			  	<img src="../image/zhifubao.png" />
			  	<div>支付宝充值</div>
			  </div>
       </div>
	   
	   <div class="appsd">
                   <div class="chongzhis  vxx" data-id="3" >
	   			  	<img src="../image/weixin.png"/>
	   			  	<div>其他微信扫码充值</div>
	   			  </div>
	   			  <div class="chongzhis vxx" data-id="1">
	   			  	<img src="../image/zhifubao.png"/>
	   			  	<div>其他支付宝扫码充值</div>
	   			  </div>
	   			  <div class="chongzhis vxx" data-id="2">
	   			  	<img src="../image/zhifubao.png"/>
	   			  	<div>其他QQ支付充值</div>
	   			  </div>
	   </div>
	   
		
			<div class="hang"></div>

			

		</div>
		<div style="display: none;" id="form">
			
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		mui.plusReady(function(){
			var url = plus.storage.getItem('url');
			var user = plus.storage.getItem('user');
			var id = '';
			user = JSON.parse(user);
			mui.post(url+'/juyou/congzhi/getjinbishezhi',{token:user.token},function(res){
				if(res.code==200){
					var str = '';
					mui.each(res.data.data,function(i,v){
						str+='<div class="dan" data-id="'+v.id+'">'+
								'<div>￥'+v.rmb+'</div>'+
								'<div>'+v.name+'</div>'+
							'</div>';
					})
					$(".head").append(str);
					if(res.data.congzhi==1){
					$("#content").show();	
					}
					$("#shenyu").text(res.data.jinbi);
				}else{
					mui.toast(res.msg);
				}
			})
			mui.init({
			      beforeback: function() {   
					  var list = plus.webview.currentWebview().opener();
			     //获得列表界面的webview  var list = plus.webview.currentWebview().opener();
			      //触发列表界面的自定义事件（refresh）,从而进行数据刷新   
			      mui.fire(list, 'refresh');  
			     //返回true，继续页面关闭逻辑     return true;  
			     }  
			
			     });  
			mui(".head").on("tap",".dan",function(){
				id = $(this).attr('data-id');
				$(this).addClass("active")
				$(this).children("div").css("color","#FFFFFF")
				$(this).siblings().removeClass("active")
				$(this).siblings().children("div:nth-child(1)").css("color","red")
				$(this).siblings().children("div:nth-child(2)").css("color","rgba(102,102,102,1)")
			})
			/**
			 * 便捷支付
			 */
			mui(document).on('tap','.apps .vxx',function(){
				var bianma = $(this).attr('data-id');
				if(!id){
					mui.toast('请选择商品');
					return
				}
				var str = url+'/juyou/zhifu/bianjiezifu?id='+id+"&token="+user.token+'&bianma='+bianma;
				mui.openWindow({
					url:str
				})
				// mui.alert(bianma)
			})
			//码支付
			mui(document).on('tap','.appsd .vxx',function(){
				var bianma = $(this).attr('data-id');
				if(!id){
					mui.toast('请选择商品');
					return
				}
				// mui.alert(bianma);
				// return
				mui.openWindow({
					url:url+'/juyou/zhifu/mazhifujinbi?token='+user.token+"&id="+id+'&bianma='+bianma
				})
			})
			// mui(document).on('tap','.lastas',function(){
			// 	$("#form").empty();
			// 	// mui.alert(id);
			// 	// return;
			// 	mui.post(url+'/juyou/mazhifu/getordericons',{token:user.token,id:id},function(res){
			// 		if(res.code==200){
			// 			var data = res.data;
			// 			var str = res.data.url;
			// 			// mui.alert(str);
			// 			mui.openWindow({
			// 				url:str
			// 			})
			// 			
			// 			
			// 		}else{
			// 			mui.toast(res.msg);
			// 		}
			// 	})
			// })
		})
	</script>
</html>
